<!-- 轮播图 -->
<template>
    <div :style="boxStyle" class="carousel">
        <div class="carousel-col">
            <div class="carousel carousel-col-item">
                <template v-for="(item, index) in element.eles.content" :key="index">
                    <div v-show="handleSlideIndex === `${index}`" class="carousel-inner">
                        <div class="carousel-item">
                            <div class="text-center">
                                <el-image :src="item.pic" fit="fill">
                                    <template #placeholder>
                                        <div class="picture-image-slot">
                                            图片加载中...
                                        </div>
                                    </template>
                                    <template #error>
                                        <div class="picture-image-slot no-image">
                                            {{ !item.pic ? '请添加图片' : '图片错误' }}
                                        </div>
                                    </template>
                                </el-image>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="element.eles.content.length === 0">
                    <div class="no-data">请添加轮播项</div>
                </template>

                <ol class="carousel-indicators">
                    <template v-for="(item, index) in element.eles.content" :key="index">
                        <li :style="{
                            width: '5px',
                            backgroundColor: handleSlideIndex === `${index}` ? element.eles.customFeature.indicatorActiveColor : element.eles.customFeature.indicatorColor
                        }" @click.stop="handleSlideIndex = `${index}`"></li>
                    </template>
                </ol>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'WidgetCarousel',
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element } = toRefs(props)

        const handleSlideIndex = computed({
            get: () => element.value.eles.customFeature.handleSlideIndex || '0',
            set: val => element.value.eles.customFeature.handleSlideIndex = val
        })
        
        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            const customFeature = element.value.eles.customFeature || {}
            return {
                width: style.width,
                height: style.height,
                opacity: style.opacity,
                marginTop: style['margin-top'],
                marginLeft: style['margin-left'],
                marginRight: style['margin-right'],
                borderRadius: customFeature.picBorderRadius
            }
        })

        return {
            element,
            handleSlideIndex,
            boxStyle
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-carousel.less';
</style>